<template>
	<view class="orderAll">
		<view class="order-header">
			<view class="order-header-item" v-for="(item,index) in items" :key="index"
				:class="current == index? 'f-active-color':''" @tap="onClickItem(index)">
				{{item}}
			</view>
		</view>
		<Lines></Lines>
		<scroll-view scroll-y="true">
			<view class="Cards">
				<!-- 全部订单 -->
				<view v-if="current == 0">
					<order :dataList="goodsList" :orderData="orderData" :current="current" :disable="true"
						v-if="goodsList.length>=1"></order>
					<noData :data='tagText' v-else></noData>
				</view>
				<!-- 待付款 -->
				<view v-else-if="current ==1">
					<order :dataList="pendingPayList" :orderData="orderData" :current="current" :disable="true"
						v-if="pendingPayList.length>=1"></order>
					<noData :data='tagText' v-else></noData>
				</view>
				<!-- 待配送 -->
				<view v-else-if="current ==2">
					<order :dataList="delivery" :orderData="orderData" :current="current" :disable="true"
						v-if="delivery.length>=1"></order>
					<noData :data='tagText' v-else></noData>
				</view>
				<!-- 待收货 -->
				<view v-else-if="current ==3">
					<order :dataList="receList" :orderData="orderData" :current="current" :disable="true"
						v-if="receList.length>=1"></order>
					<noData :data='tagText' v-else></noData>
				</view>
				<!-- 待评价 -->
				<view v-else-if="current ==4">
					<order :dataList="evaluate" :orderData="orderData" :current="current" :disable="true"
						v-if="evaluate.length>=1"></order>
					<noData :data='tagText' v-else></noData>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import Lines from '../../components/common/Lines.vue'
	import $http from "../../common/api/request.js"
	import order from '../../components/order/order.vue'
	import noData from '../../components/my_shop_store/noData.vue'
	export default {
		data() {
			return {
				current: '1',
				items: ['全部', '待付款', '待配送', '待收货', '待评价'],
				// 商品信息列表
				goodsList: [],
				// 全部订单数据
				orderData: [],
				// 商品名称列表
				goodsNameList: [],
				// 商品图片列表
				goodsImgUrl: [],
				//商品单价列表
				unitPrice: [],
				// 待付款订单  status:1
				pendingPayList: [],
				// 待配送订单 status:2
				delivery: [],
				// 待收货订单 status:3
				receList: [],
				// 待评价订单 status:4
				evaluate: [],
				tagText: '还没有订单哦，快去下单吧'

			}
		},
		components: {
			Lines,
			order,
			noData
		},
		onLoad(e) {
			if (e.id) {
				this.current = e.id
				this.onClickItem(e.id)
			}
			this.getAllData()
			this.getOrderData()
			let _this = this
			uni.$on('update', function(data) {
				if (data.id != 5) {
					_this.onClickItem(_this.current)
				} else if (data.id == 5) {
					_this.onClickItem(0)
				}
			})
		},
		onUnload() {
			// 移除监听事件
			uni.$off('update');
		},
		methods: {
			// 点击选项
			onClickItem(index) {
				this.current = String(index)
				if (index == 0) {
					this.getAllData()
				}
				// 如果index == 1 请求待付款数据
				let id = index
				if (index) {
					$http.request({
						url: '/getOrderItem',
						method: 'POST',
						header: {
							token: true
						},
						data: {
							status: index
						}
					}).then((res) => {
						if (index == 1) {
							this.pendingPayList = res
						} else if (index == 2) {
							this.delivery = res
						} else if (index == 3) {
							this.receList = res
						} else if (index = 4) {
							this.evaluate = res
						}
					}).catch(() => {

					})
				}
			},
			// 请求全部数据
			getAllData() {
				$http.request({
					url: '/getAllOrder',
					method: 'POST',
					header: {
						token: true
					}
				}).then((res) => {
					this.goodsList = res
				}).catch(() => {

				})
			},
			// 请求全部订单数据
			getOrderData() {
				$http.request({
					url: '/getOrderData',
					method: 'POST',
					header: {
						token: true
					}
				}).then((res) => {
					this.orderData = res
				}).catch(() => {

				})
			}
		}
	}
</script>

<style scoped>
	.orderAll {
		width: 750rpx;
	}

	.order-header {
		position: fixed;
		top: 0rpx;
		z-index: 999;
		background-color: aliceblue;
		width: 100%;
		padding: 8rpx 0rpx 8rpx 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order-header-item {
		width: 100%;
	}

	.orderListHeader {
		display: flex;
		height: 60rpx;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}

	.Cards {
		padding-top: 50rpx;
	}
</style>